<template>
  <div>
    <van-popup v-model="show" position="bottom" @close="close">
      <van-button type="primary" @click="clear">清空购物车</van-button>
      <van-card
        v-for="i in $store.state.shoplist"
        :key="i.cid"
        :price="i.price"
        :title="i.title"
        :thumb="i.img"
      >
        <template #tags>
          <van-tag plain type="danger">总计：{{ i.num * i.price }}</van-tag>
        </template>
        <template #footer>
          <van-stepper
            v-model="i.num"
            @plus="plus(i.cid)"
            @minus="min(i.cid)"
          />
        </template>
      </van-card>
    </van-popup>
  </div>
</template>
<script>
import { Dialog } from "vant";
export default {
  props: ["show"],
  methods: {
    close() {
      this.$emit("close");
    },
    plus(id) {
      this.$store.commit("plus", id);
    },
    min(id) {
      this.$store.commit("min", id);
    },
    clear() {
      Dialog.confirm({
        title: "标题",
        message: "是否删除",
      })
        .then(() => {
          // on confirm
          this.$store.commit("clear");
          //清空购物车

          this.$emit("close");
          //让购物车弹窗关闭
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>
<style lang="scss">
.van-popup--bottom {
  bottom: 50px !important;
}
</style>
